button rollovers using behaviors

Using Dreamweaver to create button rollovers

You can create button rollovers in Dreamweaver without ever looking at HTML or JavaScript code.

To create a series of buttons:

1 Open a new document in Dreamweaver and insert your "at rest" button images.

These are the images that will appear when the page first loads, before the user rolls over them.

2 Using the Property inspector, set each image's link, border, and name.

Even if you don't want your button to do anything when clicked, you'll need to wrap it in a link because only links can take the onMouseOver event (images are limited to onLoad, onUnLoad, and onError). To make a "nowhere" link, enter a pound sign (#) in the Link box in the Property inspector.
Naming the image is also very important; JavaScript uses this name to reference the image and swap its SRC.

To attach behaviors to the buttons:

1 Select the first image, then click on the <a> in the status bar to select the image's link.

2 Choose Window > Behaviors to open the Behavior inspector.

3 Choose "3.0+4.0 Browsers" from the pop-up menu in the Events pane. Hold down the + button and select onMouseOver from the Events list.

4 Select Swap Image from the pop-up list in the Actions pane.

5 In the dialog box that appears, select the first image's name from the list. In the Set Source to box, type in the path and filename of the highlight image and click OK.

6 Choose either "4.0 Browsers" or "Netscape 3.0" from the pop-up menu in the Events pane. Hold down the + button and select onMouseOut from the Events list.

onMouseOut is not on the Events list for 3.0+4.0 Browsers because Internet Explorer 3.0 does not support it. You are not targeting IE 3.0 with this behavior, however (IE 3.0 also does not support the src property of the image object that makes the Swap Image action possible), so this is not a problem.

7 Select Swap Image Restore from the Actions pop-up list. Click OK in the dialog box that appears.

8 Repeat steps 1-7 for each of your remaining buttons.

1	Open a new document in Dreamweaver and insert your "at rest" button images.
	These are the images that will appear when the page first loads, before the user rolls over them.
2	Using the Property inspector, set each image's link, border, and name.
	Even if you don't want your button to do anything when clicked, you'll need to wrap it in a link because only links can take the `onMouseOver` event (images are limited to `onLoad, onUnLoad,` and `onError`). To make a "nowhere" link, enter a pound sign (#) in the Link box in the Property inspector. Naming the image is also very important; JavaScript uses this name to reference the image and swap its `SRC`.

1	Select the first image, then click on the `<a>` in the status bar to select the image's link.
2	Choose Window > Behaviors to open the Behavior inspector.
3	Choose "3.0+4.0 Browsers" from the pop-up menu in the Events pane. Hold down the + button and select onMouseOver from the Events list.
4	Select Swap Image from the pop-up list in the Actions pane.
5	In the dialog box that appears, select the first image's name from the list. In the Set Source to box, type in the path and filename of the highlight image and click OK.
6	Choose either "4.0 Browsers" or "Netscape 3.0" from the pop-up menu in the Events pane. Hold down the + button and select onMouseOut from the Events list.
	`onMouseOut` is not on the Events list for 3.0+4.0 Browsers because Internet Explorer 3.0 does not support it. You are not targeting IE 3.0 with this behavior, however (IE 3.0 also does not support the `src` property of the `image` object that makes the Swap Image action possible), so this is not a problem.
7	Select Swap Image Restore from the Actions pop-up list. Click OK in the dialog box that appears.
8	Repeat steps 1-7 for each of your remaining buttons.